<template>
	<div class="member_about" :class="{dark:themeIndex==1}">
		<div class="scroll">
			<div class="levels">
				<h1>{{$t('aboutMember-key1')}}</h1>
				<h2>{{$t('aboutMember-key2')}}</h2>
				<div class="list">
					<div class="title" :class="{ja:locale!=='zh'}">
						<span class="left ele1">{{$t('aboutMember-key3')}}</span>
						<span class="left ele2">{{$t('aboutMember-key4')}}</span>
						<span class="right ele3" :class="{s2:locale==='zh'}" v-html="$t('Mining-Rate')"></span>
					</div>
					<div class="item" v-for="item in list" :key="item.level">
						<span class="left ele1">{{item.intro}}</span>
						<span class="left ele2">VIP-{{item.level}}</span>
						<b class="right ele3">{{item.dc_rate}}%</b>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Vue 				from 'vue'
import util 			from '../../util'
import { Toast,Dialog } 	from 'vant';
Vue.use(Toast,Dialog);

export default {
	name: 'aboutMember',
	data(){
		return {
			list:window.localStorage.getItem('aboutMember')?JSON.parse(window.localStorage.getItem('aboutMember')):[]
		}
	},
	methods:{
		init(){
			util.fetch(`${util.ajaxUrl}/site/level-intro`,{}).then(res => {
				if(res.retCode === 0){
					this.list = res.retData;
					window.localStorage.setItem('aboutMember',JSON.stringify(this.list))
				}else{
					Toast(res.retMsg || '未知错误')
				}
			})
		},
	},
	created(){
		this.init();
    }
}
</script>
<style scoped lang="scss">
	@import './aboutMember.scss';
</style>